<div fxLayout="row wrap" fxLayoutAlign="space-between" style="margin-top: 1em;">
  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 {{rightWidth}}%">
    <mat-card *ngIf="user.Nick === project.Author" style="padding-top: 0.1em;">
      <mat-tab-group>
        <mat-tab label="ReadMe">
          <markdown-to-html [data]="project.ReadMe"></markdown-to-html>
        </mat-tab>
        <mat-tab label="Edit">
          <ace-editor class="editor" [(ngModel)]="project.ReadMe" text="Your MD FILE" [mode]="'markdown'" style="min-height: 200px; width:100%;
                    overflow: auto;" #editor>
          </ace-editor>
          <button mat-raised-button (click)="save()" style="margin-top: 2em; color:#EEEEEE;" color="primary">Save</button>
        </mat-tab>
      </mat-tab-group>

    </mat-card>

    <mat-card *ngIf="!(user.Nick === project.Author)" style="padding-top: 0.1em;">
      <markdown-to-html [data]="project.ReadMe"></markdown-to-html>
    </mat-card>

    <mat-card *ngIf="user.Nick === project.Author || project.OpenSource">
      <div fxLayout="row wrap" fxLayoutAlign="space-between">
        <div fxFlex="1 1 100%">
          <mat-tab-group>
            <mat-tab label="Imports">
              <ace-editor class="editor" [(ngModel)]="project.Imports" [mode]="getAceCompatibleMode()" style="min-height: 200px; width:100%;
                overflow: auto;" #editor></ace-editor>
            </mat-tab>

            <mat-tab label="package.json" *ngIf="project.Mode === 'nodejs' || project.Mode === 'typescript'">
              <ace-editor class="editor" [(ngModel)]="project.Packages" text="{{project.Packages}}" [mode]="'json'" style="min-height: 200px; width:100%;
                overflow: auto;" #editor></ace-editor>
            </mat-tab>
            <mat-tab label="Types">
              <ace-editor class="editor" [(ngModel)]="project.Types" text="{{project.Types}}" [mode]="'json'" style="min-height: 200px; width:100%;
                  overflow: auto;" #editor></ace-editor>
            </mat-tab>

          </mat-tab-group>
          <button *ngIf="user.Nick === project.Author" (click)="save()" mat-raised-button style="margin-top: 1em;color: #EEEEEE;" color="primary">Save</button>
        </div>
      </div>
    </mat-card>

    <mat-card *ngIf="user && user.Nick === project.Author">
      <mat-card-title>
        Add new endpoint
      </mat-card-title>
      <div class="example-container">

        <mat-form-field>
          <mat-select [(ngModel)]="newEndpoint.Method" placeholder="Method">
            <mat-option selected value="GET">GET</mat-option>
            <mat-option value="POST">POST</mat-option>
            <mat-option value="PUT">PUT</mat-option>
            <mat-option value="DELETE">DELETE</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field>
          <input [(ngModel)]="newEndpoint.Url" matInput placeholder="Path (ie. /user)">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <textarea matInput name="description" placeholder="Description" matTextareaAutosize style="width: 100%;" [(ngModel)]="newEndpoint.Description"> </textarea>
        </mat-form-field>

        <ace-editor class="editor " [(text)]="newEndpoint.Code" [mode]="getAceCompatibleMode()" style="min-height: 200px; width:100%;
        overflow: auto;" #editor></ace-editor>

      </div>
      <button [disabled]="newEndpoint.Url === '/' || newEndpoint.Url === '' || !newEndpoint.Url.startsWith('/')" (click)="add()"
        mat-raised-button style="margin-top: 1em; color: #EEEEEE" color="primary">Add</button>
    </mat-card>
  </div>

  <div fxFlex.lt-md="1 1 100%" fxFlex="1 1 {{leftWidth}}%">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Search endpoints" [(ngModel)]="search" value="e.g. Demo project" style="min-width: 150px;" fxFlex="1 1 200%">
    </mat-form-field>

    <mat-card *ngFor="let endpoint of project.Endpoints.slice(this.currentPage * 10, (this.currentPage + 1) * 10) | FilterPipe: search"
      style="margin-bottom: 1em; padding-bottom: 0.5em;">
      <div fxLayout="row wrap" fxLayoutAlign="space-between">
        <div fxFlex="1 1 67%">
          <mat-card-title class="endpoint-title">
            <div class="method">{{endpoint.Method}}</div> {{endpoint.Url}}
          </mat-card-title>
        </div>
        <div fxFlex="1 1 33%" align="end" *ngIf="!endpoint.Selected">
          <button mat-button style="min-width: 0%;" type="button" (click)="reveal(endpoint)">
            <mat-icon aria-hidden="false">keyboard_arrow_down</mat-icon>
          </button>
        </div>
        <div fxFlex="1 1 33%" align="end" *ngIf="endpoint.Selected">
          <button mat-button style="min-width: 0%;" (click)="reveal(endpoint)">
            <mat-icon aria-hidden="false">keyboard_arrow_up</mat-icon>
          </button>
        </div>
        <div class="endpoint-description" fxFlex="1 1 100%">
          {{endpoint.Description}}
        </div>
      </div>
      <span *ngIf="endpoint.Selected">
        <ng-container>
          <mat-tab-group *ngIf="project.OpenSource">
            <mat-tab label="Code">
              <ace-editor [readOnly]="readOnly" class="editor" [(text)]="endpoint.Code" [mode]="getAceCompatibleMode()" style="min-height: 200px; width:100%;
overflow: auto;" #editor></ace-editor>
            </mat-tab>
            <mat-tab label="Input">
              <ace-editor [readOnly]="readOnly" class="editor" [(text)]="endpoint.Input" [mode]="'json'" style="min-height: 200px; width:100%;
  overflow: auto;" #editor></ace-editor>
            </mat-tab>
            <mat-tab label="Output">
              <ace-editor [readOnly]="readOnly" class="editor" [(text)]="endpoint.Output" [mode]="'text'" style="min-height: 200px; width:100%;
    overflow: auto;" #editor></ace-editor>
            </mat-tab>
          </mat-tab-group>
          <div *ngIf="user && user.Nick === project.Author">
            <div style="margin-top: 1em;" class="example-container">
              <mat-form-field>
                <mat-select [(ngModel)]="endpoint.Method" placeholder="Method">
                  <mat-option value="GET">GET</mat-option>
                  <mat-option value="POST">POST</mat-option>
                  <mat-option value="PUT">PUT</mat-option>
                  <mat-option value="DELETE">DELETE</mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field class="example-full-width">
                <input matInput placeholder="Path (ie. /user)" [(ngModel)]="endpoint.Url">
              </mat-form-field>
              <mat-form-field class="example-full-width">
                <textarea matInput name="description" placeholder="Description" matTextareaAutosize style="width: 100%;" [(ngModel)]="endpoint.Description"> </textarea>
              </mat-form-field>


            </div>
            <button [disabled]="endpoint.Url === '/' || endpoint.Url === '' || !endpoint.Url.startsWith('/')" (click)="save()" mat-raised-button
              style="margin-top: 1em; margin-bottom: 1em; color: #EEEEEE;" color="primary">Save</button>
          </div>
        </ng-container>

        <ace-editor class="editor" text="curl -X{{endpoint.Method}} {{backendUrl}}/app/{{project.Author}}/{{project.Name}}{{endpoint.Url}} -H 'token: {{getTestToken()}}'"
          [mode]="'sh'" style="min-height: 2em; margin-top: 1em; width:100%;
        overflow: auto;"></ace-editor>
      </span>
    </mat-card>
    <span *ngIf="project.Endpoints.length > 10">
      <mat-paginator [length]="project.Endpoints.length" [pageSize]="10" [pageSizeOptions]="[10]" (page)="pageChanged($event)">
      </mat-paginator>
    </span>
  </div>
</div>